<!--
 * @Description:  playbackChat -- 录播
 * @Author: your name
 * @Date: 2024-03-01
 * @LastEditTime: 2024-03-01
 * @LastEditors: Please set LastEditors
-->

<template>
  <div class="wrapper">
    <router-link class="back" :to="{ path: 'courseOutline' }">
      <img src="@/assets/images/back.png" alt="" />
      <span>返回课程大纲</span>
    </router-link>
    <div class="main">
      <div class="rightVideo" :class="{ rightfull: isscreen }">
        <div id="playbackPlayer">
          <video-player
            class="video-player vjs-custom-skin"
            ref="videoPlayer"
            :playsinline="true"
            :options="playerOptions"
            @play="onPlayerPlay($event)"
            @pause="onPlayerPause($event)"
            @playing="onPlayerPlaying($event)"
            @ended="onPlayerEnded($event)"
          >
          </video-player>
        </div>
        <!-- 底部进度条 -->
        <!-- <div class="l-m-b">
          <div class="progress-box" id="progress-box">
            <div class="background" id="background"></div>
            <div
              class="buffer"
              id="buffer"
              :style="{ width: buffwidth + '%' }"
            ></div>
            <div
              class="progress"
              id="progress"
              :style="{ width: progresswidth + '%' }"
            ></div>
            <span
              class="dot"
              id="dot"
              @mousedown="moveprogress"
              :style="{ left: progresswidth + '%' }"
            >
            </span>
          </div>

          <div class="controls">
            <div class="left">
              <div class="play">
                <a
                  href="javascript:void(0);"
                  class="btn-play"
                  title="播放"
                  id="btn-play"
                  @click="swicthplay()"
                  v-if="ispause"
                ></a>
              </div>
              <div class="noplay">
                <a
                  href="javascript:void(0);"
                  class="btn-play"
                  title="播放"
                  id="btn-play"
                  @click="swicthplay()"
                  v-if="!ispause"
                ></a>
              </div>
              <div class="time">
                <span> 00:02 </span> / <span> 164:25 </span>
              </div>
              <div class="volume">
                <a
                  href="javascript:void(0);"
                  class="btn-volume"
                  title="静音"
                  id="btn-volume"
                ></a>
              </div>
              <div class="volume-slider" id="volume-slider">
                <div
                  class="v-progress"
                  id="v-progress"
                  :style="{ width: voulewidth + '%' }"
                ></div>
                <div
                  class="v-dot"
                  id="v-dot"
                  @mousedown="move"
                  :style="{ left: voulewidth + '%' }"
                ></div>
              </div>
            </div>
            <div class="right">
              <ul class="tools">
                <li class="rate" id="rate" @click="showrate()">
                  <a
                    href="javascript:void(0);"
                    title="倍速"
                    class="btn-rate"
                    id="btn-rate"
                  >
                    {{ speedNum }}
                  </a>
                </li>
                <li class="fullscreen">
                  <a
                    href="javascript:void(0);"
                    title="网页全屏"
                    class="btn-fullscreen"
                    id="btn-fullscreen"
                    @click="onswitchfull()"
                    v-if="isscreen"
                  >
                  </a>
                </li>
                <li class="fullscreen">
                  <a
                    href="javascript:void(0);"
                    title="退出全屏"
                    class="btn-fullscreen"
                    id="btn-fullscreen"
                    @click="onswitchfull()"
                    v-if="!isscreen"
                  ></a>
                </li>
              </ul>
              <ul class="select" id="select" v-if="rateshow">
                <li
                  value="4"
                  v-for="(sulv, i) in velocity"
                  :key="i"
                  @click="changevoule(sulv)"
                >
                  <a
                    href="javascript:void(0);"
                    :class="{ act_col: sulv == speedNum }"
                  >
                    {{ sulv }}
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div> -->
      </div>
      <div class="left" :class="{ rightfullleft: isscreen }">
        <div class="askBox">
          <h5 class="tit">聊天</h5>
          <div class="askList" id="chat-list">
            <div
              class="item"
              v-for="(chatitem, chatindex) in 2"
              :key="chatindex"
            >
              <h5 class="name">Crystal:</h5>
              <p v-html="chatitem.msg"></p>
              <p>123</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'

export default {
  name: 'playbackChat',
  data() {
    return {
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false, // 如果为true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为, 立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: 'video/mp4', // 类型
            src: 'https://video.rycfa.com/sv/1891c9ee-18bcb9fc4cd/1891c9ee-18bcb9fc4cd.mp4' // url地址
          }
        ],
        // poster: '@/assets/images/material/video-bg.png', // 封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true // 是否显示全屏按钮
        }
      },
      rateshow: false,
      chat_msg: [],
      velocity: ['2.0X', '1.5X', '1.25X', '1.0X', '0.8X'],
      speedNum: '1.0X', //倍速数据
      ispause: false, //是否暂停
      buffwidth: 0, //buff 宽度
      progresswidth: 0, //进度 宽度
      isscreen: false, // 是否全屏
      voulewidth: 100,
      alltimer: 0, //总时长秒数
      alltime: 0, //总时长
      last_time: 0
    }
  },
  created() {
    var $doumn = $('#playbackPlayer')
    console.log($doumn.text())
  },
  mounted() {
    console.log((window.on_cc_live_chat_msg = function (data) {}))

    var that = this
    // $.DW.isShowBar(1)
    var a = 0
    window.on_cc_live_player_load = function () {
      // 播放器加载完毕
      console.log($.DW.getDuration(), 'mounted') // 获取视频总时长
      a = $.DW.getDuration()
      that.alltimer = a
      $.DW.setVolume(1)
      var mins = Math.floor(a / 60),
        sec = a % 60
      if (mins <= 0) {
        mins = '0' + mins
      }
      if (sec <= 0) {
        mins = '0' + sec
      }
      that.alltime = mins + ':' + sec
      that.xq_begin()
    }
    window.on_cc_player_ready = function () {
      if (that.last_time > 0) {
        that.PlayerLoaded = true
      }
      console.log(that.PlayerLoaded, 'on_cc_player_ready')
    }
    window.on_player_start = function () {
      console.log(that.PlayerLoaded, 'on_player_start')
    }
  },
  methods: {
    // 进度
    moveprogress(e) {
      var _that = this
      let odiv = e.target // 获取目标元素
      console.log(odiv, 213, e)
      //   let parentClientWidth = Number(
      //     document.getElementById('progress-box').offsetWidth - 4
      //   )
    },
    move() {},
    onswitchfull() {
      this.isscreen = !this.isscreen
    },
    showrate() {
      this.rateshow = !this.rateshow
    },
    changevoule(e) {
      //   $.DW.playbackRate(e)
      this.rateshow = !this.rateshow
      this.speedNum = e
    },
    // 监听播放
    onPlayerPlay(player) {
      // this.$signalr.SendMsg(6301, this.id, '开始播放视频')
      console.log('开始播放视频')
    },
    // 暂停视频
    onPlayerPause(player) {
      // this.$signalr.SendMsg(6302, this.id, '暂停视频')
      console.log('暂停视频')
    },
    // 视频继续播放
    onPlayerPlaying(player) {
      // this.$signalr.SendMsg(6303, this.id, '视频继续播放')
      console.log('视频继续播放')
    },
    // 视频播放结束
    onPlayerEnded(player) {
      // this.$signalr.SendMsg(6304, this.id, '视频播放结束')
      console.log('视频播放结束')
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/index.scss';
@import '@/assets/styles/playbackchat.scss';

.act_col {
  color: #ff920a !important;
}
</style>
